<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
    <el-row v-show="stepIndex === 0">
      <el-col :span="12">
        <el-form-item label="项目编号" prop="license">
          <el-input v-model="form.license" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="关键字" prop="keyValue">
          <el-input v-model="form.keyValue" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="简要标题" prop="nameShort">
          <el-input v-model="form.nameShort" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目级别" prop="visLevel">
          <select-form
            v-model="form.visLevel"
            :options="dictData[dictIdMaps.projectLevel]"
            :multiple="false"
            :default-props="{ label: 'value', value: 'code' }"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="开始日期" prop="expectStartDate" class="w100">
          <el-date-picker
            v-model="form.expectStartDate"
            class="w100"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledStartDate"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结束日期" prop="expectEndDate" class="w100">
          <el-date-picker
            v-model="form.expectEndDate"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledEndDate"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="stepIndex === 1">
      <el-col :span="12">
        <el-form-item label="项目类型" prop="sort">
          <select-form
            v-model="form.sort"
            :options="dictData[dictIdMaps.projectType]"
            :multiple="false"
            :default-props="{ label: 'value', value: 'code' }"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="项目阶段" prop="phase">
          <select-form
            v-model="form.phase"
            :options="dictData[dictIdMaps.projectPhase]"
            :multiple="false"
            :default-props="{ label: 'value', value: 'code' }"
          />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="申办方" prop="sponsor">
          <el-input v-model="form.sponsor" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="适应症" prop="purposeValue">
          <el-input v-model="form.purposeValue" placeholder="请输入" type="textarea" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="目的" prop="indications">
          <el-input v-model="form.indications" placeholder="请输入" type="textarea" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="项目描述" prop="depict">
          <el-input v-model="form.depict" placeholder="请输入" type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { defineProps, reactive, ref, watch } from 'vue'

import SelectForm from '@/components/Form/Select.vue'

import { validate } from '@/utils/formExtend'

import type { FormInstance } from 'element-plus'

defineProps({
  stepIndex: {
    type: Number,
    default: 0,
  },
  dictData: {
    type: Object,
    default: () => [],
  },
  dictIdMaps: {
    type: Object,
    default: () => {},
  },
})

const rules = {
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  license: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
  nameShort: [{ required: true, message: '请输入简要标题', trigger: 'blur' }],
  keyValue: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
  expectStartDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
  expectEndDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
  expectNum: [{ required: true, message: '请输入受试者数量', trigger: 'change' }],
}
const form = reactive({
  license: '',
  name: '',
  nameShort: '',
  keyValue: '',
  sponsor: '',
  expectStartDate: '',
  expectEndDate: '',
  sort: '',
  visLevel: '',
  phase: '',
  indications: '',
  purposeValue: '',
  depict: '',
  // expectNum: 1,
  // expectDisable: false,
  // restrictSex: '',
  // ageDisable: false,
  // ageMin: 0,
  // ageMax: 0,
})

// watch(
//   () => form.ageDisable,
//   () => {
//     form.ageMin = 0
//     form.ageMax = 0
//   }
// )

const changeMinAge = (val: number) => {
  // if (val > form.ageMax) {
  //   ElMessage({
  //     type: 'error',
  //     message: '不能大于最大年龄！',
  //   })
  //   setTimeout(() => {
  //     form.ageMin = 0
  //   }, 50)
  // }
}

const changeMaxAge = (val: number) => {
  // if (val < form.ageMin) {
  //   ElMessage({
  //     type: 'error',
  //     message: '不能小于最小年龄！',
  //   })
  //   setTimeout(() => {
  //     form.ageMax = 0
  //   }, 50)
  // }
}
const disabledStartDate = (time: Date) => {
  return form.expectEndDate ? time.getTime() > +new Date(form.expectEndDate) : false
}

const disabledEndDate = (time: Date) => {
  return form.expectStartDate ? time.getTime() < +new Date(form.expectStartDate) : false
}

const formRef = ref<FormInstance>()
const valid = () => {
  return validate(formRef.value)
}

const clear = () => {
  formRef.value?.resetFields()
}

defineExpose({
  form,
  valid,
  clear,
})
</script>

<style lang="scss" scoped>
.w100 {
  :deep() {
    .el-date-editor,
    .el-input__wrapper {
      width: 100%;
    }
  }
}
</style>
